<template>
	<view style="padding-top:48rpx;">
		<uni-nav-bar left-icon="left" backgroundColor="rgb(77, 139, 246)" :border="false" color="#fff"
			@clickLeft="onClickNavBack">
			<view class="nav-title">银行卡</view>
		</uni-nav-bar>
		<view class="content">
			<view class="list-item" v-for="item in list" :key="item.cardId">

				<view class="cardNo" @click="chooseCardNo(item)">
					<image class="icon" src="@/static/images/unionPay.png" mode=""></image>

					<view>{{item.cardNo}}</view>
				</view>
				<!-- <view class="untie">解绑</view> -->
				<button size="mini" type="default" style="color:#ffffff;backgroundColor:#BC4134" hover-class="none"
					@click="untie(item)">解绑</button>
			</view>

			<su-fixed bottom placeholder>
				<view class="footer-box ss-flex ss-row-between ss-p-20">
					<button type="primary" class="add-btn ss-reset-button "
						@tap="sheep.$router.go('/pages/me/addBankCard')">
						新增银行卡
					</button>
				</view>
			</su-fixed>
		</view>
	</view>
</template>

<script setup>
	import {
		ref,

	} from 'vue'
	import {
		onLoad,
		onShow
	} from '@dcloudio/uni-app'
	import sheep from '@/sheep';
	import bankAcountApi from '@/sheep/api/member/bankAcount';
	const list = ref([])
	const onClickNavBack = () => {
		uni.navigateBack()
	}
	//查询银行卡列表
	const getList = async () => {
		let data = {
			userId: uni.getStorageSync('userId') || ''
		}
		let res = await bankAcountApi.getBankCardList(data)
		console.log('查询银行卡列表', res)
		list.value = res.data
	}
	const untie = async (item) => {
		//获取密码因子
		let data = {
			userId: uni.getStorageSync('userId') || ''
		}
		let res = await bankAcountApi.getAcctmgrRandom(data)
		console.log('获取密码因子', res);

		//获取密码控件token
		let resp = await bankAcountApi.getAcctmgrPasswordToken({
			userId: uni.getStorageSync('userId') || '',

			passwordScene: 'bind_card_password'
		})
		console.log('获取密码控件token', resp);

		if (res.data.ret_code == "0000") {
			// 以下参数通过服务端获取
			lianlianpay.invokePasswordControl({
				/**
				 * passwordScene 使用场景
				 * setting_password-设置密码
				 * change_password-修改密码
				 * bind_card_password-换绑卡
				 * cashout_password-提现
				 * pay_password-支付
				 */
				passwordScene: 'bind_card_password',
				oidPartner: res.data.oid_partner, // 商户号
				userId: res.data.user_id, // 用户号
				passwordElementToken: resp.data, // 向服务端请求生成的 token
				env: 'production', // 默认 production-生产
				styles: { // 样式集合
					themeColor: '#0E59F0', // 主题颜色（按钮等）
				}
			}, async (passwordObj) => {
				console.log('密码数据', passwordObj)
				if (passwordObj.code == '0000') {

					let data = {
						userId: uni.getStorageSync('userId') || '',
						linkedAcctNo: item.cardNo,
						randomKey: passwordObj.data.randomKey,
						password: passwordObj.data.password,
					}
					let res = await bankAcountApi.unlinkedacct(data)
					console.log('解绑', res)

				}

			})

		}
	}

	const chooseCardNo = (item) => {
		console.log('from', from)
		if (from == 'SURPLUS') {
			uni.navigateTo({
				url: '/pages/me/components/withdraw?cardNo=' + item.cardNo
			})
		}

	}
	onShow(() => {
		getList()
	})
	let from = ''
	onLoad((ops) => {
		console.log('ops', ops.from)
		from = ops.from
	})
</script>

<style lang="scss" scoped>
	.nav-title {
		font-size: 32rpx;
		display: flex;
		align-items: center;
		justify-items: center;
		justify-content: center;
		flex: 1;
	}

	.content {
		padding: 10px;
		box-sizing: border-box;

		.list-item {
			display: flex;
			justify-content: space-between;
			align-items: center;
			padding: 15px 5px;
			margin-bottom: 10px;
			// border-bottom: 1rpx solid #ccc;

			border-radius: 10px;
			/* 圆角边框 */
			box-shadow:
				0 4px 8px rgba(0, 0, 0, 0.2),
				/* 光源偏下 */
				0 6px 20px rgba(0, 0, 0, 0.19);
			/* 更强的阴影 */
			transition: transform 0.3s;

			/* 添加过渡效果 */
			.cardNo {
				display: flex;
				align-items: center;
				width: 80%;
				white-space: nowrap;
				/* 禁止换行 */
				overflow: hidden;
				/* 超出部分隐藏 */
				text-overflow: ellipsis;

				/* 显示省略号 */
				.icon {
					width: 25px;
					height: 15px;
					margin-right: 5px;
				}
			}

			.untie {
				width: 20%;
				text-align: center;
				color: #BC4134;
			}
		}



		.footer-box {
			.add-btn {
				flex: 1;
				// background: linear-gradient(90deg, var(--ui-BG-Main), var(--ui-BG-Main-gradient));
				border-radius: 80rpx;
				font-size: 30rpx;
				font-weight: 500;
				line-height: 80rpx;
				// color: $white;
				position: relative;
				z-index: 1;
			}

			.sync-wxaddress {
				flex: 1;
				line-height: 80rpx;
				background: $white;
				border-radius: 80rpx;
				font-size: 30rpx;
				font-weight: 500;
				color: $dark-6;
				margin-right: 18rpx;
			}
		}
	}
</style>